<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../第二次尝试/todolist/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div
			class="text"
		 v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']"
			style="width:200px; height:200px; text-align:center;line-height:200px;">
			  hi vue
			</div>
			
			<div 
			:style="{color:color , fontSize:size, bachground: isRed ? '#FF0000' : ''}">
			hi vue
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data :{
					isActive : true,
					isGreen : true,
					color : "#FFFFFF",
					size : '50px',
					isRed : true
				}
			});
		</script>
		<style>
			.text{font-size: 30px;}
			.green{color:#00FF00;}
			.active{background: #FF0000;}
		</style>
	</body>
</html>
 